<template>
  <!-- <button class="btn" @click="enter">点击进入全屏</button> -->
  <div class="zks" ref="target">
    <button @click="exit">点击推出全屏</button>
    <p>与人在公共场合，请保持距离注意语言的规范</p>
    <ol>
      <li><input type="checkbox" />--正向炒面啊是非得失</li>
      <li><input type="checkbox" />正向炒面啊是非得失</li>
      <li><input type="checkbox" />正向炒面啊是非得失</li>
    </ol>
    {{ zls }}
    {{ entersss }}
    {{ userAgent }}
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import { useFullscreen, useEventListener } from "@vueuse/core";
const target = ref("");
const zls = ref("sssss");
const entersss = ref("ss");

// 获取用户代理字符串
var userAgent = ref(navigator.userAgent);
const { isFullscreen, enter, exit, toggle } = useFullscreen(target);
// console.log(isFullscreen, enter, exit, toggle);
onMounted(() => {
  window.addEventListener("resize", function (event) {
    console.log("屏幕尺寸发生变化");
    // 在此处执行其他操作，例如显示提示或执行特定的逻辑
    // 获取 User Agent
    var userAgent = navigator.userAgent.toLowerCase();

    // 判断是否在微信中打开
    if (userAgent.indexOf("micromessenger") !== -1) {
      alert("当前页面在微信中打开");
    } else {
      alert("当前页面不在微信中打开");
    }
  });

  // 页面可见性改变时的事件处理程序
  function handleVisibilityChange() {
    if (document.visibilityState === "hidden") {
      //  alert('用户离开了当前页面');
      zls.value = "用户离开";
      // 在此处执行其他操作，例如发送请求或记录日志
    } else {
      // alert('用户回到了当前页面');
      // 在此处执行其他操作，例如更新页面内容
      entersss.value = "用户进来";
    }
  }

  // 添加页面可见性改变事件的监听器
  document.addEventListener("visibilitychange", handleVisibilityChange);

  // document.addEventListener("contextmenu", (e) => {
  //   e.preventDefault();
  // });

  // //把文字选中禁用
  document.addEventListener("selectstart", function (e) {
    e.preventDefault();
  });
  //把文字选中禁用
  document.addEventListener("copy", function (e) {
    e.preventDefault();
  });
  //把文字选中禁用
  document.addEventListener("paste", function (e) {
    e.preventDefault();
  });
  // document.addEventListener("keydown", function (e) {
  //   if (e.code === "F12") {
  //     e.preventDefault();
  //   }
  // });

  // document
  //   .getElementById("fullscreenButton")
  //   .addEventListener("click", async function () {
  //     this.style.display='none'
  //     var element = document.documentElement; // 获取整个页面的元素
  //     console.log(element);
  //     await element.requestFullscreen();
  //   });

  // document.addEventListener("fullscreenchange", (event) => {
  //   console.log(2,isFullscreen.value);
  // });
});
onUnmounted;
</script>

<style lang="css">
.zks {
  width: 100%;
  height: 100vh;
  border: 1px solid #000;
  background-color: white;
  margin: 0 auto;
}
.btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
.btn:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0.5;
}
</style>
